<template>
  <div class="videoBox">
    video.js
    <div v-html="videoHtml"></div>
  </div>
</template>

<script>
import Video from 'video.js'
import 'video.js/dist/video-js.css'
export default {
  data(){
    return{
      player:null,
      src:null,
      videoHtml:null,
      mediaSource:null
    }
  },
  beforeDestroy(){
    
  },
  methods:{
    initVideo(){
      this.player = Video('myVideo',{
        // 自动播放
        // autoplay: true,
        //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        controls: true,
        //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload: "auto",
        //设置视频播放器的显示宽度（以像素为单位）
        width: "800px",
        //设置视频播放器的显示高度（以像素为单位）
        height: "400px",
        // 循环播放
        loop:true
      })
    },
    fnTimeupdate(){
      let myVideo = document.querySelector('#myVideo video')
      var timeDisplay;
      //用秒数来显示当前播放进度
      timeDisplay = Math.floor(myVideo.currentTime);
      console.log('当前播放进度：',timeDisplay,'s')
    },
    fnLoadedmetadata(){
      let myVideo = document.querySelector('#myVideo video')
      console.log('loadedmetadata-视频源数据加载完成')
      myVideo.currentTime = 120
      // myVideo.play()
    },
    getData(){
      return new Promise((resolve,reject)=>{
        this.$http.get(this.$baseUrl.sysRedioPlayer,{
          headers:{
            Range:'bytes=0-20000'
          },
          responseType: "arraybuffer"
        }).then((res)=>{
         resolve(res)
        }).catch((err)=>{
          reject(err)
        })
      })
    },
    sourceOpen(e){
      let myVideo = document.querySelector('#myVideo video')
      // window.URL.revokeObjectURL(this.mediaSource)
      // 设置 媒体的编码类型
      var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
      var sourceBuffer = this.mediaSource.addSourceBuffer(mimeCodec)
      this.getData().then((res)=>{
        sourceBuffer.addEventListener('updateend',(_)=>{
          this.mediaSource.endOfStream()
        })
        console.log('res.data',res.data)
        sourceBuffer.appendBuffer(res.data)
      })
    }
  },
  mounted(){
    this.videoHtml = `<video id="myVideo" controls preload="auto" class='video-js vjs-default-skin'>
      <source src="http://172.16.101.179:8787/kimp/sys/redio/player" >
    </video>`
    // this.initVideo()
    this.$nextTick(()=>{
      this.initVideo()
      this.mediaSource = new MediaSource()
      var video = document.querySelector('#myVideo')
      video.src = URL.createObjectURL(this.mediaSource)
      this.mediaSource.addEventListener('sourceopen', this.sourceOpen,true);
    })
  }
}
</script>

<style>

</style>